<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>full page</title>
    <link rel="stylesheet" type="text/css" href="../stactis/css/jquery.fullPage.css" />
    <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
    <!--<script src="fullPage.js-master/vendors/jquery.easings.min.js"></script>-->
    <!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
    <!--<script type="text/javascript" src="fullPage.js-master/vendors/scrolloverflow.min.js"></script>-->
    <!--<script type="text/javascript" src="fullPage.js-master/jquery.fullPage.js"></script>-->
</head>
<body>
<style>
    .fp-tooltip{
        color: #AAA;
    }
    #fp-nav span, .fp-slidesNav span{
        border-color: #AAA;
    }
    #fp-nav li .active span, .fp-slidesNav .active span{
        background: #AAA;
    }
</style>
<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../sea-modules/sea.js"></script>
<script>
    seajs.config({
        alias: {
            "vendors": "../sea-modules/vendors/jquery.easings.min.js",
            "scrolloverflow": "../sea-modules/vendors/scrolloverflow.min.js",
            "fullPage": "../sea-modules/vendors/jquery.fullPage.js"
        }
    });
    define(function(require, exports, module) {
        //引用jQuery模块
        var $ = require('vendors');
        var $ = require('scrolloverflow');
        var $ = require('fullPage');
    });
    // 加载入口模块
    seajs.use("../static/hello/src/main")
</script>
<script>
        $(document).ready(function() {
            $('#fullpage').fullpage({
                'verticalCentered': false,
                'css3': true,
                'sectionsColor': ['#F0F2F4', '#fff', '#fff', '#fff'],
                'navigation': true,
                'navigationPosition': 'right',
                'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],

                'afterLoad': function(anchorLink, index){
                    if(index == 2){
                        $('#iphone3, #iphone2, #iphone4').addClass('active');
                    }
                },

                'onLeave': function(index, nextIndex, direction){
                    if (index == 3 && direction == 'down'){
                        $('.section').eq(index -1).removeClass('moveDown').addClass('moveUp');
                    }
                    else if(index == 3 && direction == 'up'){
                        $('.section').eq(index -1).removeClass('moveUp').addClass('moveDown');
                    }

                    $('#staticImg').toggleClass('active', (index == 2 && direction == 'down' ) || (index == 4 && direction == 'up'));
                    $('#staticImg').toggleClass('moveDown', nextIndex == 4);
                    $('#staticImg').toggleClass('moveUp', index == 4 && direction == 'up');
                }
            });
    });
</script>
</body>
</html>